<template>
    <fieldset>
        <legend>父组件</legend>
        <h1>父组件</h1>
        <h2>{{ msg }}</h2>
        <component :is="dynamic"></component>
        <Child ref="childCom" :data="gift" @send="receive"></Child>
        <button ref="btn" @click="handleChange">点击改变传递给子组件的值</button>
    </fieldset>
</template>
<script setup>
//setup语法糖
//只要组件被创建了,就会调用setup
//1.可以直接引入组件 不需要在components中注册了 因为import引入的内容也会暴露给模板
import Child from "./Child.vue"
import { ref, reactive, onMounted } from "vue"
//2.声明的响应式数据也能够直接暴露给模板使用了,模板使用的时候会自动对ref数据进行解包
let msg = ref("父组件中的值")
// console.log(msg.value)
//3.动态组件的使用 只需要引入就可以了 动态组件必须展示在一个叫做<component></component>的标签上
import dynamic from "./dynamic.vue"
let gift = reactive({ name1: "vue3从入门到精通" })
//4.声明的函数也可以直接暴露给模板使用,不需要再使用methods了
let handleChange = () => {
    // console.log(123)
    gift.name1 = "vue2全忘光了"
}

//声明一个接受子组件传参的事件处理函数

function receive(input) {
    console.log(input)
}

//创建一个refs的引用 
let childCom = ref(null);
let btn = ref(null)
//在组件挂载之后
onMounted(()=>{
    console.log(childCom.value) //组件的引用
    console.log(btn.value) //元素的引用
})

</script>